section { max-width: 1920px; margin: auto; padding: 0; }
p { font-size: 20px; }
h2 { font-size: 46px; font-weight: 700; }
section#hero { height: 86vh; max-height: 800px; background: linear-gradient(45deg, #160d29, #3b045d, #6b0476); overflow: hidden; position: relative; }
section#hero h1 { font-size: 48px; line-height: 150%; }
section#hero h3 { font-size: 35px; }
section#hero h4 { font-size: 22px; font-style: italic; font-weight: 400; }
section#hero img.banner-grid { width: 100%; bottom: -40%; position: relative; transition: 0.6s ease-out; }
section#hero .container { position: absolute; z-index: 2; left: 50%; top: 55%; transform: translate(-50%, -50%); text-align: center; }
section#hero .wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 60px; }
section#hero .wrapper > div { margin: 0 12px; }
section#hero .wrapper .card { border-radius: 20px; padding: 60px 64px; backdrop-filter: blur(4px); background: rgba(22,13,41,0.7); color: #57d5bd; font-size: 22px; font-weight: 800; line-height: 150%; }
section#hero .wrapper img.arrow { margin: 20px auto; display: block; }


section#hero2 { height: 800px; text-align: center; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
section#hero2 .container { margin: 75px auto 0; }
section#hero2 img.banner { width: 100%; left: 0; bottom: -50%; position: absolute; transition: 0.6s ease-out; }
section#hero2 h1 { line-height: 100%; margin-bottom: 40px; text-shadow: 0 0 2px black; font-size: 64px; }
section#hero2 p { margin: 0; color: white; font-size: 22px; text-shadow: 0 0 2px black; }
section#hero2 .buttons { margin: 40px auto 0; }

section#solutions { position: relative; padding: 120px 0 0; }
section#solutions .container { height: 70vh; max-height: 800px; background: linear-gradient(45deg, #160d29, #3b045d, #6b0476); border-radius: 20px; overflow: hidden; }
section#solutions h2 { font-size: 48px; line-height: 150%; color: #57d5bd; }
section#solutions h3 { font-size: 35px; }
section#solutions h4 { font-size: 22px; font-style: italic; font-weight: 400; }
section#solutions img.banner-grid { width: 120%; bottom: -18%; left: 0; position: absolute; object-fit: contain; object-position: center 0; transition: 0.6s ease-out; }
section#solutions .contents { position: absolute; z-index: 2; width: 100%; left: 0%; top: 53%; transform: translate(0, -50%); text-align: center; }
section#solutions .wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 60px; width: 64%; margin: 0 auto 60px; }
section#solutions .wrapper > div { margin: 0 12px; flex: 1; }
section#solutions .wrapper .card { border-radius: 20px; padding: 60px 64px; backdrop-filter: blur(4px); background: rgba(22,13,41,0.7); color: #57d5bd; font-size: 22px; font-weight: 800; line-height: 150%; }
section#solutions .wrapper img.arrow { margin: 20px auto; display: block; }


section#infographic { background: url('/modules/main/images/new/infographic.png') no-repeat; background-position: 110% 49%; background-size: 70%; padding: 14% 0; }
section#infographic p { max-width: 50%; }
section#map .container { background: linear-gradient(to top right, #160d29, #3b045d, #6b0476); border-radius: 20px; padding: 120px 100px; margin-bottom: 120px; overflow: hidden; }
section#map img.planets { position: absolute; top: 3%; left: -22%; transition: 0.4s linear; z-index: 0; width: 70%; }
section#map img.token { position: absolute; top: 45%; right: -3%; transition: 0.4s linear; z-index: 0; width: 54%; }
section#map img.reallocation { position: absolute; bottom: -9%; left: -18%; transition: 0.4s linear; z-index: 0; width: 61.5%; }
section#map .container > div { z-index: 1; position: relative; }
section#map .center { text-align: center; max-width: 51%; margin: auto; }
section#map h2 { font-size: 58px; color: #4ad9b2; }
section#map h3 { font-size: 46px; }
section#map .center p { font-size: 24px; font-weight: 700; color: white; }
section#map .right { padding: 80px 0 80px 50%; }
section#map .left { padding: 80px 50% 80px 0; }
section#map .buttons .btn { margin: 10px; }
section#blog { padding-bottom: 120px; }




@media (max-width: 1440px) {
p { font-size: 18px; }
h2 { font-size: 40px; }
section#hero { height: 82vh; }
section#hero h1 { font-size: 42px; }
section#hero h3 { font-size: 31px; }
section#hero h4 { font-size: 20px; }
section#hero .wrapper { margin-bottom: 40px; }
section#hero .wrapper img.arrow { height: 30px; }
section#hero .wrapper .card { border-radius: 20px; padding: 54px 58px; font-size: 21px; }
section#hero2 { height: 600px; }
section#hero2 h1 { margin-bottom: 30px; font-size: 54px; }
section#hero2 p { font-size: 20px; }
section#solutions { padding: 100px 0 0; }
section#solutions .container { width: calc(100% - 60px); height: 80vh; }
section#solutions h3 { font-size: 31px; }
section#solutions h4 { font-size: 20px; }
section#solutions .wrapper { margin-bottom: 40px; }
section#solutions .wrapper img.arrow { height: 30px; }
section#solutions .wrapper .card { border-radius: 20px; padding: 54px 58px; font-size: 21px; }
section#map img.planets { width: 61%; top: 0%; }
section#map img.token { width: 46%; top: 45%; right: 2%; }
section#map img.reallocation { width: 52.5%; bottom: -7%; left: -17%; }
section#infographic p { max-width: 45%; }
section#map .container { padding: 90px 60px; margin-bottom: 100px; width: calc(100% - 60px); }
section#map h2 { font-size: 52px; }
section#map h3 { font-size: 40px; }
section#map .center { max-width: 50%; padding-bottom: 40px; }
section#map .center p { font-size: 21px; }
section#map .right { padding: 50px 0 50px 50%; }
section#map .left { padding: 50px 50% 50px 0; }
section#blog { padding-bottom: 100px; }
}

@media (max-width: 1280px) {
p { font-size: 16px; }
section#hero { height: 60vh; }
section#hero h1 { font-size: 40px; }
section#hero h3 { font-size: 28px; }
section#hero h4 { font-size: 19px; }
section#hero .wrapper .card { padding: 48px 52px; font-size: 20px; }

section#hero2 { height: 540px; }
section#hero2 h1 { margin-bottom: 26px; font-size: 42px; }
section#hero2 p { font-size: 18px; }
section#hero2 .buttons { margin: 30px auto 0; }

section#solutions .container { height: 65vh; }
section#solutions h2 { font-size: 40px; }
section#solutions h3 { font-size: 28px; }
section#solutions h4 { font-size: 19px; }
section#solutions .wrapper .card { padding: 48px 52px; font-size: 20px; }


section#infographic h2 { max-width: 45%; }
section#map .container { padding: 70px 44px; margin-bottom: 100px; }
section#map h2 { font-size: 48px; }
section#map h3 { font-size: 36px; }
section#map .center { padding-bottom: 20px; }
section#map .center p { font-size: 20px; }
section#map .right { padding: 40px 0 40px 50%; }
section#map .left { padding: 40px 50% 40px 0; }
}

@media (max-width: 1024px) {
h2 { font-size: 28px;}
section#hero { height: initial; padding: 140px 0 60px; }
section#hero .container { position: relative; left: initial; top: initial; transform: initial; }
section#hero h1 { font-size: 28px; margin-bottom: 10px; }
section#hero h3 { font-size: 21px; padding: 0 20px; }
section#hero h4 { font-size: 20px; padding: 0 10%; }
section#hero .wrapper { width: 100%; margin: 0 auto 20px; align-items: stretch; justify-content: stretch; }
section#hero .wrapper > div { margin: 0 8px; flex: 50%; }
section#hero .wrapper .card { padding: 20px 16px; font-size: 16px; margin: 10px auto; max-width: 360px; }
section#hero img.banner-grid { position: absolute; bottom: -14%; width: 300%; left: -100%; }


section#hero2 h1 { font-size: 28px; }
section#hero2 h1 br { display: none; }
section#hero2 p { font-size: 16px; padding: 0 0px; }
section#hero2 p br { display: none; }
section#hero2 .buttons { margin: 20px auto 0; }

section#hero2 { height: initial; padding: 6vh 0; }
section#hero2 img.banner { bottom: -40%; width: 200%; left: -50%; }

section#solutions { padding: 60px 0 0; }
section#solutions .container { height: initial; padding: 4vh 0; }
section#solutions .contents { position: relative; top: initial; left: initial; transform: initial; }
section#solutions h2 { font-size: 20px; margin-bottom: 10px; }
section#solutions h3 { font-size: 20px; padding: 0 20px; }
section#solutions h4 { font-size: 18px; padding: 0 10%; }
section#solutions .wrapper { width: 100%; margin: 0 auto 20px; align-items: stretch; justify-content: stretch; }
section#solutions .wrapper > div { margin: 0 8px; flex: 50%; }
section#solutions .wrapper .card { padding: 20px 12px; font-size: 16px; margin: 10px auto; max-width: 360px; }
section#infographic { background: url('/modules/main/images/infographic_mobile.png') no-repeat; background-position: 50% 85px; background-size: 200%; padding: 40px 0 110%; }
section#infographic h2, section#infographic p { max-width: initial; }
section#map .container { padding: 50px 30px; margin-bottom: 60px; }
section#map h2 { font-size: 28px; }
section#map h3 { font-size: 22px; }
section#map .center { max-width: initial; }
section#map .left, section#map .right { padding: 20px 0; }
section#map img.planets, section#map img.token, section#map img.reallocation { display: none; }
section#map .btn { width: 100%; }
section#blog { padding-bottom: 60px; }
}